<template>
	<div class="hot">
		<div class="hot-header">
			<div class="hot-header-left">
				<img src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="本周热门榜单">
				<p>本周热门榜单</p>
			</div>
			<div class="hot-header-right">
				<p class="iconfont ">全部榜单&#xe603;</p>
			</div>
		</div>
		<router-link to="/xiangqing">
		<div class="hot-img">
			<ul class="hot-img-ul">
				<li class="hot-img-li" v-for="item of imglist">
					<div class="hot-imglist">
						<img :src="item.urlimg" :alt="item.title">
					</div>
					<p>{{ item.title }}</p>
					<div class="price">
						<em class="price-em">{{ item.price }}</em>起
					</div>
				</li>
			</ul>
		</div>
	</router-link>
	</div>
</template>

<script>
	export default{
		props:["imglist"],
		data(){
			return{
				
			}
		}
	}
</script>

<style scoped lang="stylus">
	@import "~css/common.styl"
	.hot{
		background-color: #fff;
		font-size: .32rem;
		overflow: hidden;
		margin-top: .2rem;
	}
	.hot-header{
		width: 100%;
		line-height: .44rem;
	}
	.hot-header{
		padding-top: .2rem;
		overflow: hidden;
	}
	.hot-header-left{
		padding-left: .2rem;
	}
	.hot-header-left img{
		width: .3rem;
		height: .3rem;
		float: left;
	}
	.hot-header-left p{
		float: left;
		padding-left: .1rem;
	}
	.hot-header-right{
		float: right;
	}
	.hot-header-right p{
		font-size: .24rem;
		color: #616161;
		padding: 0 .7rem;
	}
	.hot-img{
		margin-top:.3rem;
		padding-bottom: .3rem;
	}
	.hot-img-ul{
		padding: 0 .24rem;
	    overflow-x: scroll;
	    white-space: nowrap;
	}
	.hot-img-li{
		position: relative;
	    display: inline-block;
	    padding: .06rem 0 .2rem;
	    width: 2rem;
	    margin-right: .2rem;
	}
	.hot-imglist{
		overflow: hidden;
	    width: 2rem;
	    height: 0;
	    padding-bottom: 100%;
	}
	.hot-imglist img{
		width: 2rem;
		height: 2rem;
	}
	.hot-img-li p{
		margin-top: .12rem;
	    color: #212121;
	    font-size: .24rem;
	    line-height: .32rem;
	    text-align: center;
	    $hotsize();
	}
	.hot-img-li .price{
		color: #616161;
	    font-size: .24rem;
	    line-height: .36rem;
	    text-align: center;
	}
	.hot-img-li .price .price-em{
		font-size: .28rem;
		color: #ff8300;
	}
	.hot-img-li:nth-child(1):before{
		$hotaddimg('http://img1.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png');
	}
	.hot-img-li:nth-child(2):before{
		$hotaddimg('http://img1.qunarzz.com/piao/fusion/1710/2d/36d0c4adaebbbc02.png');
	}
	.hot-img-li:nth-child(3):before{
		$hotaddimg('http://img1.qunarzz.com/piao/fusion/1710/67/edc47ffef9e96b02.png');
	}
</style>
